<!--
 @description 立面详情
 @fileName FacedeDetail.vue
 @author zengqiongying
 @created 2023/06/15 10:15:44
-->
<template>
  <div class="has-foot-pb">
    <FaceFileList ref="listContainer" :sfid="sfid" :readonly="operatorType !== 'edit'" />
    <div v-if="operatorType === 'edit' && detail && detail.sfid === sfid" :class="['ctm-content-foot']">
      <div v-if="![null, undefined, ''].includes(detail.preSFID)" class="btn-page" @click="onPage('prev')">上一面</div>
      <div v-if="operatorType === 'edit'" class="btn-page" @click="onCreate">新增问题</div>
      <template v-if="![null, undefined, ''].includes(detail.nextSFID)">
        <!-- 硬装必须按照顺序编辑(停顿3s才到下一页)，软装可任意编辑 -->
        <!-- <div v-if="timeSecond === -1" class="btn-page" @click="onPage('next')">下一面</div>
        <div v-else class="btn-page">{{ timeSecond }}s</div> -->
        <!-- 20230717 变更：硬装验收取消3s切换的限制 -->
        <div class="btn-page" @click="onPage('next')">下一面</div>
      </template>
    </div>
  </div>
</template>

<script lang="ts">
  import { ref, reactive, toRefs, getCurrentInstance } from 'vue'
  import { useRoute } from 'vue-router'
  import FaceFileList from '@/views/components/Facade/FileList.vue'
  import { queryFacadeDetail, SaveFacadeStatus } from '@/apis/Facade'
  import { IAnyKeyObject } from '@/types/common'
  export default {
    name: 'FacadeFileList',
    components: { FaceFileList },
    setup() {
      const instance = getCurrentInstance()
      const { proxy }: any = instance
      const $route = useRoute()
      const listContainer = ref()
      const datas = reactive<IAnyKeyObject>({
        //acceptMold (验收类型)： softReview 软装复查/ softCheck 软装验收 / hardReview 硬装复查 / hardCheck 硬装验收
        acceptMold: $route.query.acceptMold || '',
        //operatorType (操作类型)： edit 编辑
        operatorType: $route.query?.type || '',
        sfid: $route.query?.sfid || '', // 立面ID
        detail: {
          facadeName: ''
        },
        timeSecond: -1 // 硬装需间隔3秒才能到下一页
      })
      const setPageTitle = (name: string) => {
        proxy.$SimpleEvents.emit('routeMetaTitle', name + '验收')
      }
      const onCreate = () => {
        listContainer.value && listContainer.value.onEdit()
      }
      let interval: any = null
      const countDown = () => {
        if (datas.acceptMold !== 'hardCheck') return
        datas.timeSecond = 3
        interval = setInterval(() => {
          if (datas.timeSecond === 0) {
            clearCountDown()
            return
          }
          datas.timeSecond = datas.timeSecond - 1
        }, 1000)
      }
      const clearCountDown = () => {
        if (interval) {
          clearInterval(interval)
          interval = null
        }
        datas.timeSecond = -1
      }
      // 上一面/下一面
      const onPage = (type: string) => {
        const prevId = datas.detail.preSFID
        const nextId = datas.detail.nextSFID
        datas.sfid = type === 'next' ? nextId : prevId
        initData()
      }

      const getDetailData = async () => {
        const sfid = `${datas.sfid}`
        await queryFacadeDetail(sfid).then((res) => {
          datas.detail = res.data || {}
          setPageTitle(datas.detail.facadeName)
        })
      }

      /**
       * 设置最后一次验收的立面(用于判断是否已验收过)
       * @param {string} amid 区域ID
       * @param {string} facade 立面
       * */
      const setFacadeStatus = () => {
        SaveFacadeStatus(datas.sfid).then(() => {})
      }

      const initData = async () => {
        await getDetailData()
        if (datas.operatorType === 'edit') {
          setFacadeStatus()
        }
        countDown()
      }

      initData()
      return {
        ...toRefs(datas),
        listContainer,
        onPage,
        onCreate
      }
    }
  }
</script>
<style lang="less" scoped>
  /deep/ .qmp-list__finished-text {
    display: none;
  }
  .btn-add-programe {
    margin: 8px 0;
    background: var(--bg-global-weaker);
    border-radius: var(--radius-xl);
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font: var(--font-main-body);
    color: var(--texticon-color-brand-normal);
  }
  .btn-page {
    background: var(--bg-global-weaker);
    flex: 1;
    font: var(--font-control-xl);
    color: var(--texticon-color-brand-normal);
    text-align: center;
  }
</style>
